<template>
  <div id="secondecharts"></div>
</template>

<script>
import * as echarts from "echarts";
import { allmba } from "../../apis/rrk/link.js";
export default {
  mounted() {
    allmba().then((res) => {
      var chartDom = document.getElementById("secondecharts");
      var myChartone = echarts.init(chartDom);
      var option;
      setTimeout(function () {
        option = {
          legend: {},
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          tooltip: {
            trigger: "axis",
            showContent: false,
          },
          dataset: {
            source: res.data.data,
          },
          xAxis: { type: "category" },
          yAxis: { gridIndex: 0 },
          grid: { top: "55%" },
          series: [
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "pie",
              id: "pie",
              radius: "30%",
              center: ["50%", "25%"],
              emphasis: {
                focus: "self",
              },
              label: {
                formatter: "{b}: {@2012} ({d}%)",
              },
              encode: {
                itemName: "product",
                value: "2012",
                tooltip: "2012",
              },
            },
          ],
        };
        myChartone.on("updateAxisPointer", function (event) {
          const xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChartone.setOption({
              series: {
                id: "pie",
                label: {
                  formatter: "{b}: {@[" + dimension + "]} ({d}%)",
                },
                encode: {
                  value: dimension,
                  tooltip: dimension,
                },
              },
            });
          }
        });
        myChartone.setOption(option);
      });
      option && myChartone.setOption(option);
    });
  },
};
</script>

<style scoped lang="scss">
#secondecharts {
  background-color: #fff;
  width: 50%;
  height: 420px;
  margin-left: 100px;
}
</style>